import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Mail, Phone, Send, Globe } from "lucide-react";

export default function DroneSpectrum() {
  const [lang, setLang] = useState("es");

  const t = {
    es: {
      heroTitle: "Soluciones aéreas profesionales en Madrid y Alicante",
      heroSub: "Cartografía precisa, inspecciones técnicas y vídeos espectaculares para tu negocio.",
      cta: "Solicita presupuesto",
      servicesTechTitle: "Servicios Técnicos (DJI Mavic 3E)",
      servicesTech: [
        "Cartografía & Fotogrametría 2D/3D",
        "Inspecciones de placas solares y aerogeneradores",
        "Seguimiento de obras y topografía",
        "Agricultura de precisión"
      ],
      servicesCreativeTitle: "Servicios Creativos (DJI Mini Pro)",
      servicesCreative: [
        "Fotografía y vídeo inmobiliario",
        "Promoción turística y marketing",
        "Eventos deportivos y corporativos",
        "Producciones audiovisuales y publicidad"
      ],
      portfolio: "Explora algunos de nuestros proyectos: mapas 3D, inspecciones de infraestructuras y producciones creativas.",
      pricingTitle: "Tarifas",
      pricing: [
        { title: "Inmobiliaria básica", price: "€180", desc: "10 fotos aéreas + 1 vídeo corto" },
        { title: "Inspección solar", price: "Desde €250", desc: "Informe + imágenes de detalle" },
        { title: "Cartografía & Topografía", price: "Desde €80/ha", desc: "Mínimo €300" },
        { title: "Eventos & producciones", price: "Desde €450/día", desc: "Filmación profesional" }
      ],
      about: "Soy piloto profesional de drones certificado por AESA, especializado en combinar la precisión técnica con la creatividad visual. Trabajo como autónomo en Madrid y Alicante, ofreciendo servicios a inmobiliarias, constructoras, empresas de energía renovable y productoras audiovisuales.",
      contact: "Cuéntanos tu proyecto y te responderemos en menos de 24h.",
      footer: "Piloto registrado en AESA – Operador UAS con seguro de responsabilidad civil."
    },
    en: {
      heroTitle: "Professional aerial solutions in Madrid & Alicante",
      heroSub: "Accurate mapping, technical inspections and stunning aerial media for your business.",
      cta: "Get a Quote",
      servicesTechTitle: "Technical Services (DJI Mavic 3E)",
      servicesTech: [
        "Mapping & Photogrammetry 2D/3D",
        "Solar & Wind Inspections",
        "Construction Monitoring & Surveying",
        "Precision Agriculture"
      ],
      servicesCreativeTitle: "Creative Services (DJI Mini Pro)",
      servicesCreative: [
        "Real Estate Photography & Video",
        "Tourism & Marketing",
        "Corporate & Sports Events",
        "Media & Advertising Shoots"
      ],
      portfolio: "Explore some of our projects: 3D mapping, infrastructure inspections and creative productions.",
      pricingTitle: "Pricing",
      pricing: [
        { title: "Basic Real Estate", price: "€180", desc: "10 aerial photos + 1 short video" },
        { title: "Solar Inspection", price: "From €250", desc: "Report + detail images" },
        { title: "Mapping & Surveying", price: "From €80/ha", desc: "Minimum €300" },
        { title: "Events & Productions", price: "From €450/day", desc: "Professional filming" }
      ],
      about: "I am a professional drone pilot certified by AESA, specialized in combining technical precision with creative visuals. Based in Madrid & Alicante, I work as a freelance operator serving real estate agencies, construction firms, renewable energy companies and media producers.",
      contact: "Tell us about your project and we’ll reply within 24 hours.",
      footer: "AESA-registered drone operator – Fully insured professional service."
    }
  };

  const langData = t[lang];

  return (
    <div className="font-sans">
      {/* Language Toggle */}
      <div className="flex justify-end p-4">
        <Button variant="outline" onClick={() => setLang(lang === "es" ? "en" : "es")}>{lang === "es" ? "EN" : "ES"}</Button>
      </div>

      {/* Hero */}
      <section className="text-center py-20 bg-gradient-to-r from-blue-600 to-cyan-500 text-white">
        <h1 className="text-4xl font-bold mb-4">{langData.heroTitle}</h1>
        <p className="mb-6 text-lg">{langData.heroSub}</p>
        <Button size="lg">{langData.cta}</Button>
      </section>

      {/* Services */}
      <section className="py-16 max-w-5xl mx-auto px-4">
        <h2 className="text-3xl font-bold mb-6">{langData.servicesTechTitle}</h2>
        <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
          {langData.servicesTech.map((s, i) => (
            <li key={i} className="p-4 bg-gray-100 rounded-xl shadow">{s}</li>
          ))}
        </ul>

        <h2 className="text-3xl font-bold mb-6">{langData.servicesCreativeTitle}</h2>
        <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {langData.servicesCreative.map((s, i) => (
            <li key={i} className="p-4 bg-gray-100 rounded-xl shadow">{s}</li>
          ))}
        </ul>
      </section>

      {/* Portfolio */}
      <section className="py-16 bg-gray-50 text-center px-4">
        <h2 className="text-3xl font-bold mb-4">Portfolio</h2>
        <p className="mb-6">{langData.portfolio}</p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="h-48 bg-gray-300 rounded-xl">Demo 1</div>
          <div className="h-48 bg-gray-300 rounded-xl">Demo 2</div>
          <div className="h-48 bg-gray-300 rounded-xl">Demo 3</div>
        </div>
      </section>

      {/* Pricing */}
      <section className="py-16 max-w-5xl mx-auto px-4">
        <h2 className="text-3xl font-bold mb-8 text-center">{langData.pricingTitle}</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {langData.pricing.map((p, i) => (
            <Card key={i} className="text-center">
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-2">{p.title}</h3>
                <p className="text-2xl font-bold mb-2">{p.price}</p>
                <p>{p.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* About */}
      <section className="py-16 bg-gray-50 px-4 text-center">
        <h2 className="text-3xl font-bold mb-6">About</h2>
        <p className="max-w-3xl mx-auto text-lg">{langData.about}</p>
      </section>

      {/* Contact */}
      <section className="py-16 max-w-3xl mx-auto px-4 text-center">
        <h2 className="text-3xl font-bold mb-6">Contact</h2>
        <p className="mb-6">{langData.contact}</p>
        <form className="grid gap-4 text-left">
          <input className="p-3 border rounded-lg" placeholder="Name / Nombre" />
          <input className="p-3 border rounded-lg" placeholder="Email / Teléfono" />
          <input className="p-3 border rounded-lg" placeholder="Service / Servicio" />
          <textarea className="p-3 border rounded-lg" placeholder="Message / Mensaje" rows={4}></textarea>
          <Button className="w-full"><Send className="mr-2 h-4 w-4" /> {langData.cta}</Button>
        </form>
        <div className="flex justify-center gap-6 mt-6">
          <a href="mailto:info@dronespectrum.org" className="flex items-center gap-2"><Mail /> info@dronespectrum.org</a>
          <a href="tel:+34123456789" className="flex items-center gap-2"><Phone /> +34 123 456 789</a>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-6 text-center">
        <p className="mb-2">{langData.footer}</p>
        <p>© {new Date().getFullYear()} Drone Spectrum</p>
      </footer>
    </div>
  );
}